<template>
  <!-- 条次管理 -->
  <div class="tiaoci-manage">
    <div class="recharge-list-top" v-if='canRecharge'>
      <div class="recharge-title">
        <span>可用条次</span>
        <span class="blue-text">{{ info.remain_strip || 0 }}</span>
      </div>
      <div class="recharge-list-label">条次充值：</div>
      <div class="recharge-list">
        <div 
          class="recharge-item" 
          :class="{'active': activeIndex === index}"
          v-for="(item, index) in rechargeList" 
          @click="toggleItem(index, item)"
          :key="index">
            <span class="recharge-item_num">{{ item.number }}</span>
            <span class="recharge-item_price">￥{{ item.price }}</span>
        </div>
      </div>
      <div class="recharge-sure-btn" @click="sureRecharge">{{ btnText }}</div>
    </div>
    <div class="info-top" v-else>
      <span class="info-label">可用条次</span>
      <div class="num blue-text">{{ info.remain_strip || 0 }}</div>
      <div class="recharge-btn" @click="toRecharge">充值</div>
    </div>

    <div class="info-cell">
      <div class="cell-left">条次明细：</div>
      <div class="cell-right">已充值{{ info.sum_strip }}，已消耗{{ info.used_strip }}</div>
    </div>
    <div class="table-list" v-if="list.length">
      <div class="table-item" v-for="(item, index) in list" :key="index">
        <div class="table-left">
          {{ item.project_name }}
        </div>
        <div class="table-center">
          <span class="red-text" v-if="item.type === 'USED'">-{{ item.strip_num}}</span>
          <span class="green-text" v-else>+{{ item.strip_num }}</span>
        </div>
        <div class="table-right">
          {{ item.create_time }}
        </div>
      </div>
    </div>
    <div class="no-data" v-else>
      <span>暂无数据</span>
    </div>
    <div class="no-more" v-if="list.length">— 没有更多了 —</div>

    <div class="common-dialog" v-if="showCommonDialog">
      <p class="mask"></p>
      <div class="common-dialog-content">
        <div class="title-top">
          <img src="@/assets/image/freeze-tip.png" alt="" class="title-img"/>
          提示
        </div>
        <div class="dialog-text">
          {{ dialogText }}
        </div>
        <div class="know-btn" @click="showCommonDialog = false">知道了</div>
      </div>
    </div>
    <div class="common-dialog" v-if="showConfirmDialog">
      <p class="mask" @click="closeConfirmDialog"></p>
      <div class="common-dialog-content">
        <div class="title-top">
          <img src="@/assets/image/freeze-tip.png" alt="" class="title-img"/>
          充值确认
        </div>
        <div class="confirm-info">
          <div class="confirm-cell">
            <div class="confirm-cell_label">充值数量：</div>
            <span class="yellow-text">{{ activeItem.number }}条</span>
          </div>
           <div class="confirm-cell">
            <div class="confirm-cell_label">应付金额：</div>
            <span class="yellow-text">￥{{ activeItem.price }}.00</span>
          </div>
        </div>
        <div class="confirm-tip">
          <span class="red-text">*</span> 条次到账可能会有延迟，请耐心等待
        </div>
        <img :src="payUrl" alt="" class="pay-img" v-if="payUrl"/>
        <div style="text-align: center; margin-bottom: 3vw;" v-if="payUrl">常按识别二维码支付</div>
        <div class="know-btn" @click="wxPay">微信支付</div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  getStripCount, listUsedAndRecharge, 
  getOnlinePaySetting, getPayStatus
} from '@/api/account'
import { getOssDomain } from '@/api/oss'
import { Toast } from 'vant';
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      payUrl: '',
      showRecharge: false,
      num: 0,
      info: {},
      list: [],
      dialogText: '条次充值请联系您的服务商进行充值。',
      showCommonDialog: false,
      showConfirmDialog: false,
      canRecharge: false, // 是否能在线充值
      rechargeList: [],
      activeIndex: 0,
      activeItem: {},
      btnText: '确认充值',
      oss_domain: '',
      timer: '',
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  async mounted () {
    document.title = '条次管理'
     if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    this.getStripCount()
    this.listUsedAndRecharge()
    this.getOnlinePaySetting()
    console.log('token:', this.token)
  },
  methods: {
    getOnlinePaySetting () {
      getOnlinePaySetting().then(res => {
        this.rechargeList = res
        if (res.length) {
          this.activeItem = res[0]
          this.btnText = `确认充值(￥${res[0].price})`
        }
      })
    },
    closeConfirmDialog () {
      this.payUrl = ''
      this.showConfirmDialog = false
    },
    wxPay () {
      // getPayUrl({
      //   recharge_num: this.rechargeList[this.activeIndex].number
      // }).then(res => {
      //   this.payUrl = `${this.oss_domain}/${res.code_url}`
      //   // console.log('res.code_url:', res.code_url)
      //   // window.location.href = res.code_url
      //   this.searchPayResult(res.order_no)
      // })
    },
    searchPayResult (order_no) {
      this.timer = setInterval(() => {
         getPayStatus({ order_no }).then(res => {
          console.log('pay result:', res)
          if (res.pay_status === 'PAY_SUCCESS') {
            clearInterval(this.timer)
            this.timer = null
            this.listUsedAndRecharge()          
          }
          if (res.pay_status === 'PAY_ERROR') {
            Toast('支付失败')
            clearInterval(this.timer)
            this.timer = null
          }
        })
      }, 1000)
    },
    sureRecharge () {
      const item = this.rechargeList[this.activeIndex]
      if (!item) return
      const token = this.token
      const backUrl = encodeURIComponent(`${location.href}${location.href.includes('?') ? '&' : '?'}token=${token}`)
      // 跳转到小程序中
      wx.miniProgram.redirectTo({
        url: `/pages/pay/pay?baseUrl=${process.env.VUE_APP_BASE_URL}&price=${this.activeItem.price}&number=${this.activeItem.number}&token=${token}&backUrl=${backUrl}`,
      })
    },
    toggleItem (index, item) {
      this.activeIndex = index
      this.activeItem = item
      this.btnText = `确认充值(￥${item.price})`
    },
    toRecharge () {
      if(this.canRecharge) {
        this.showRecharge = true
      } else {
        this.showCommonDialog = true
      }
    },
    listUsedAndRecharge () {
      listUsedAndRecharge().then(res => {
        res.forEach(item => {
          item.create_time = this.$dayjs(item.create_time).format('YYYY/MM/DD')
        })
        this.list = res
      })
    },
    getStripCount() {
      getStripCount().then(res => {
        this.info = res
        // 如果是线上支付，允许用户通过支付宝支付
        if (res.pay_type === 'ONLINE_PAY') {
          this.canRecharge = true
        }
      })
    },
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
}
</script>
<style scoped>
.no-more {
  margin-top: 12px;
  line-height: 4.53vw;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  color: #CCCCCC;
}
.no-data {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  color: #666666;
}
.pay-img {
  display: block;
  width: 30vw;
  height: 30vw;
  margin: 0 auto 3vw;
}
.yellow-text {
  color: #FF7628;
}
.red-text {
  color: #FF0000!important;
}
.confirm-info {
  width: 61.33vw;
  height: 19.2vw;
  box-sizing: border-box;
  background: #fff;
  padding-top: 3.2vw;
  padding-left: 6.4vw;
  margin: 0 auto 1.07vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
}
.confirm-tip {
  margin-bottom: 20px;
  margin-left: 5.33vw;
  font-family: 思源黑体;
  font-size: 2.67vw;
  font-weight: normal;
  color: #333333;
}
.confirm-cell {
  display: flex;
  margin-bottom: 3.2vw;
}
.confirm-cell_label {
  margin-right: 3.2vw;
  color: #666666;
}

.recharge-item_num {
  margin-bottom: 0.53vw;
  line-height: 6.93vw;
  font-family: 思源黑体;
  font-size: 4.8vw;
  font-weight: 500;
  text-align: center;
  color: #333333;
}
.recharge-item_price {
  line-height: 4.53vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  text-align: center;
  color: #999999;
}
.recharge-sure-btn {
  width: 53.33vw;
  height: 9.07vw;
  line-height: 9.07vw;
  margin: 0 auto;
  text-align: center;
  border-radius: 1.07vw;
  background: #0A67FF;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  color: #FFFFFF;
}
.recharge-sure-btn.dis {
  background: #ccc;
}
.recharge-list {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 0 5.33vw;
  margin-bottom: 3.2vw;
}
.recharge-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 88px;
  height: 51px;
  margin-bottom: 2.13vw;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
}
.recharge-item.active {
  background: rgba(10, 103, 255, 0.1);
  border: 1px solid #0A67FF;
}
.recharge-item.active .recharge-item_num {
  color: #0A67FF;
}
.recharge-list-label {
  box-sizing: border-box;
  padding-left: 5.33vw;
  margin-bottom: 2.67vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  color: #999999;
}
.recharge-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4.27vw;
  font-family: 思源黑体;
  font-size: 4.8vw;
  font-weight: 500;
  color: #3D3D3D;
}
.recharge-title span:first-of-type {
  margin-right: 4.27vw;
}
.recharge-list-top {
  box-sizing: border-box;
  padding-top: 5.33vw;
  width: 89.87vw;
  padding-bottom: 4vw;
  margin: 0 auto 5.33vw;
  border-radius: 2.13vw;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.common-dialog {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: RGBA(0,0,0,.3);
  z-index: 1;
}
.common-dialog-content {
  position: relative;
  box-sizing: border-box;
  padding-top: 5.33vw;
  padding-bottom: 5.33vw;
  width: 71.73vw;
  border-radius: 3.2vw;
  background: #F8F8FA;
  box-sizing: border-box;
  border: 1px solid #E9E9E9;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  z-index: 2;
}
.title-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4.27vw;
  font-family: 思源黑体;
  font-size: 4.8vw;
  font-weight: bold;
  color: #FF8040;
}
.title-img {
  width: 5.33vw;
  height: 5.33vw;
  margin-right: 2.13vw;
}
.dialog-text {
  margin: 0 6.4vw 10.67vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  color: #333333;
}
.know-btn {
  width: 37.33vw;
  height: 8.53vw;
  margin: 0 auto;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  background: #0A67FF;
  text-align: center;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  color: #fff;
}
.red-text {
  color: #FF0000;
}
.green-text {
  color: #00A22B;
}
.table-count {
  font-size: 2.67vw;
  color: #999;
}
.table-list {
  width: 89.87vw;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 4.27vw 3.2vw 4.27vw 4.27vw;border-radius: 8px;
  background: #FFFFFF;
  border: 1 solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
}
.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  height: 5.6vw;
  margin-bottom: 4.27vw;
}
.table-item:last-of-type {
  margin-bottom: 0.53vw;
}
.table-left {
  flex-shrink: 0;
  width: 33.6vw;
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: SourceHanSansCN-Regular-Regular;
  font-size: 3.73vw;
  font-weight: normal;
  color: #333333;
}
.table-center {
  flex: 1;
  text-align: center;
  font-family: 思源黑体;
  font-size: 3.73vw;
  font-weight: 500;
}
.table-right {
  font-family: 思源黑体;
  font-size: 3.73vw;
  font-weight: normal;
  color: #999999;
}
.info-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 5.07vw 2.13vw;
}
.cell-right {
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  color: #999999;
}
.cell-left {
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  color: #666666;
}
.tiaoci-manage {
  display: flex;
  flex-direction: column;
  padding-top: 5.33vw;
  padding-bottom: 5.33vw;
  min-height: 100vh;
  background: #F6F6F8;
}
.info-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 89.87vw;
  height: 17.07vw;
  box-sizing: border-box;
  padding: 0 3.2vw 0 5.33vw;
  border-radius: 2.13vw;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.06);
  margin: 0 auto 4.27vw;
}
.info-label {
  margin-right: 3.2vw;
  font-family: 思源黑体;
  font-size: 14px;
  font-weight: 500;
  color: #3D3D3D;
}
.num {
  flex: 1;
  font-family: 思源黑体;
  font-size: 6.4vw;
  font-weight: 500;
}
.blue-text {
  color: #0A67FF;
}
.recharge-btn {
  width: 16vw;
  height: 6.4vw;
  line-height: 6.4vw;
  text-align: center;
  border-radius: 4px;
  background: #FF7628;
  box-sizing: border-box;
  border: 1px solid #FF7628;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  color: #FFFFFF;
}
</style>